<!-- 页面 -->
<template>
    <div class="shou">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in list.banner" :key="index"><img :src=item.image_url
                    alt=""></van-swipe-item>
        </van-swipe>
        <van-grid :column-num="5">
            <van-grid-item v-for="(item, index) in list.channel" :key="index"><img :src=item.icon_url alt="">{{ item.name
            }}</van-grid-item>
        </van-grid>
        <b>品牌制造商直供</b>
        <van-row type="flex" justify="space-between">
            <van-col span="11" v-for="(item, index) in list.brandList" :key="index"><img style="width: 100%;"
                    v-lazy="item.list_pic_url" alt=""></van-col>
        </van-row>
        <van-row type="flex" justify="space-between">
            <van-col span="11" v-for="(item, index) in list.hotGoods" :key="index">
                <img v-lazy="item.list_pic_url" style="width: 100%;" alt="">{{item.name}} 
            </van-col>
        </van-row>
        <xia :active1="active1"></xia>
    </div>
</template>
<!-- vue -->
<script>
import xia from '@/components/xia.vue'
export default {
    components: {
        xia,
    },
    data() {
        return {
            // 声明的属性
            list: [],
            active1: 'shou'
        }
    },
    //生命周期函数
    mounted() {
        this.$axios.get('http://shop.bufantec.com/bufan/index/index', {}).then(res => {
            this.list = res.data
            console.log(this.list);
        })

    },
    // 调用方法
    methods: {
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
       
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.shou {
    width: 100%;
    height: 100%;
}

.shou .my-swipe img {
    height: 200px;
}

.shou b {
    width: 80%;
    height: 50px;
    margin-left: 10px;
    font-size: 20px;
    display: inline-block;
    line-height: 50px;
}
</style>